<template>
  <div style="padding: 30px">
    <el-row type="flex" justify="space-between">
      <el-card shadow="always" style="width: 370px; height: 300px">
        <div>
          <el-alert title="总答题数量" type="info" :closable="false">
          </el-alert>
          <div style="width: 200px; height: 150px">
            <br />
            <h1 style="padding-left: 40px; font-weight: 400">
              ￥{{ this.list[3].value * 10 + "," + this.list[5].value * 100 }}
            </h1>
          </div>
          <span>周同比{{ this.list[0].value }}%</span><span></span>
          <span>日环比{{ this.list[1].value }}%</span><span></span>
          <el-divider content-position="right">阿里云</el-divider>
          <p>日答数题量&nbsp;&nbsp;￥{{ this.list[4].value * 10 }}</p>
        </div>
      </el-card>
      <el-card shadow="always" style="width: 370px; height: 300px">
        <div
          ref="fei"
          id="main2"
          style="
            width: 200px;
            height: 200px;
            padding-top: 10px;
            padding-left: 40px;
          "
        ></div>
        <el-divider content-position="right">区域</el-divider>
      </el-card>
      <el-card shadow="always" style="width: 370px; height: 300px">
        <div
          ref="fei"
          id="main3"
          style="width: 370px; height: 200px; padding-top: 10px"
        ></div>
        <el-divider content-position="right">重名比例</el-divider>
      </el-card>
      <el-card shadow="always">
        <div
          ref="fei"
          id="main4"
          style="width: 370px; height: 200px; padding-top: 10px"
        ></div>
        <el-divider content-position="right">工资</el-divider>
      </el-card>
    </el-row>
    <br />
    <!-- --------------------------------------第二行--------------------------------------------------- -->

    <el-row type="flex" justify="space-between">
      <el-card shadow="always">
        <el-tabs v-model="activeName">
          <el-tab-pane label="用户管理" name="first">
            <div id="main5" style="width: 940px; height: 400px"></div>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">
            <div id="main10" style="width: 940px; height: 400px"></div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- ---------------------------------------------------- -->
      <el-card shadow="always" style="width: 550px; height: 500px">
        <div>
          <!-- ------------日期---------------- -->
          <div class="block">
            
    <el-date-picker
    @change="change"
      v-model="value1"
      type="date"
      value-format="timestamp"
      placeholder="选择日期">
    </el-date-picker>
          </div>
          <!-- ------------日期---------------- -->
          <el-table :data="tableData" style="width: 100%; height: 400px">
            <el-table-column
              prop="describe"
              label="学科试题数量排名"
              width="350"
            >
            </el-table-column>
            <el-table-column prop="date"></el-table-column>
          </el-table>
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryData.page"
              :page-sizes="[5, 4, 6, 8]"
              :page-size="queryData.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
      <!-- --------------------------------------------------------------- -->
    </el-row>

    <br />
    <!-- --------------------------------------------第三行--------------------------------------------- -->

    <el-row type="flex" justify="space-between">
      <el-card shadow="always">
        <div style="width: 820px; height: 340px">
          <el-row :gutter="20">
            <el-col :span="16"
              ><div class="grid-content bg-purple" style="padding-bottom: 10px">
                线上热门搜索
              </div></el-col
            >
            <el-col :span="4"
              ><div class="grid-content bg-purple"></div
            ></el-col>
            <el-col :span="4"
              ><div class="grid-content bg-purple"></div
            ></el-col>
          </el-row>
          <el-table
            :data="tableData"
            height="270"
            border
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column prop="date" label="日期" sortable width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" sortable width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
          <!-- ------------------------------------分页--------------------------------------- -->
          <el-row :gutter="20">
            <el-col :span="5"
              ><div class="grid-content bg-purple"></div
            ></el-col>
            <el-col :span="4" :offset="11"
              ><div class="grid-content bg-purple"></div
            ></el-col>
          </el-row>
        </div>
      </el-card>
      <el-card shadow="always">
        <div
          id="main0"
          style="width: 620px; height: 340px; padding-left: 10px"
        ></div>
      </el-card>
    </el-row>

    <!-- ----------------------------------------------------------------------------------------- -->
    <br />
    <el-card>
      <div id="oio" style="width: 100%; height: 500px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { arr } from "@/mock-c";
import axios from "axios";
import {formatDate} from '@/filters'
export default {
  name: "IndexPage",

  data() {
    return {
      activeName: "second",
      tableData: [],
      newarr: arr,
      myChart3: null,
      option: null,
      list: [],
      list1: [],
      list2: [],
      list3: [],
      value1:'',
      queryData: {
        page: 1,
        pagesize: 5,
      },
      count: 0,
    };
  },
  props: {},
  components: {},
  created() {
    this.initData();

    // =================3333====================
    let arr1 = [];

    this.newarr.forEach((val) => {
      arr1.push(val.data);
      // console.log(val.data);
    });
    this.list.push(...arr1);

    // =================333================
    // ========================5/10=======================
    let arr2 = [];
    this.newarr.forEach((val) => {
      arr2.push(val.series);
    });
    // for(var i =0; i<arr2.length;i++){
    //   if(i >=4){
    //     return;
    //   }
    this.list1.push(...arr2);
    //   console.log(arr[i]);
    // }
    // console.log(arr2[0]);
    // ========================5/10=======================
    // ------------------222----------------------
    let arr3 = [];
    this.newarr.forEach((val) => {
      arr3.push(val.indicator);
    });
    this.list2.push(...arr3);
    // console.log(arr3, "----------------");
    let arr4 = [];
    this.newarr.forEach((val) => {
      arr4.push(val.dataList);
    });
    // console.log(arr4);
    this.list3.push(...arr4);
    // -------------------222-----------------------

    // let day1 = [];
    // this.newarr.forEach((val) => {
    //   day1.push(val.DateDay.day)
      
    // });
    // console.log('12121212',day1);
    // this.day1.push(...day1)
  },

  methods: {
    async initData() {
      // this.tableData = arr;
      // let { items, counts } = await getRandomsListApi(this.queryData);
      let res = await axios.post(
        "http://localhost:8080/questions/randomsss/",
        this.queryData
      );
      // console.log(res,res.data.data.counts);
      this.tableData = res.data.data.tableData;
      // console.log(
      //   this.tableData,
      //   "--------------------------------------------------"
      // );
      this.count = res.data.data.counts;
    },

    handleSizeChange(val) {
      this.queryData.pagesize = val;
      console.log(`每页 ${val} 条`);
      this.initData();
    },
    handleCurrentChange(val) {
      this.queryData.page = val;
      this.initData();
      console.log(`当前页: ${val}`);
    },
    change(val){
      let date= formatDate(val)   }

  },

  computed: {},
  watch: {},
  mounted() {
    var myChart2 = echarts.init(document.getElementById("main2"));

    myChart2.setOption({
      radar: {
        shape: "circle",
        indicator: [
          { name: this.list2[0].name, max: 6500 },
          { name: this.list2[1].name, max: 16000 },
          { name: this.list2[2].name, max: 30000 },
          { name: this.list2[3].name, max: 38000 },
          { name: this.list2[4].name, max: 52000 },
          { name: this.list2[5].name, max: 25000 },
        ],
      },
      series: [
        {
          name: "Budget vs spending",
          type: "radar",
          data: [
            {
              value: this.list3[1].value,
            },
            {
              value: this.list3[2].value,
            },
            {
              value: this.list3[4].value,
            },
          ],
        },
      ],
    });

    var myChart3 = echarts.init(document.getElementById("main3"));
    myChart3.setOption({
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
        },
      },
      series: [
        {
          type: "pie",
          radius: [20, 80],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 4,
          },
          data: this.list,
          //  [
          //   { value: 40, name: 'rose 1' },
          //   { value: 38, name: 'rose 2' },
          //   { value: 32, name: 'rose 3' },
          //   { value: 30, name: 'rose 4' },
          //   { value: 28, name: 'rose 5' },
          //   { value: 26, name: 'rose 6' },
          // ]
        },
      ],
    });

    var myChart4 = echarts.init(document.getElementById("main4"));
    myChart4.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Email",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: this.list1[4].data,
        },
        {
          name: "Search Engine",
          type: "bar",
          data: this.list1[3].data,
          emphasis: {
            focus: "series",
          },
        },
        {
          name: "Baidu",
          type: "bar",
          barWidth: 5,
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: this.list1[0].data,
        },
      ],
    });
    // -------------------------------------5------------------------------------------
    var myChart5 = echarts.init(document.getElementById("main5"));
    myChart5.setOption({
      title: {
        text: "每周趋势",
      },
      tooltip: {
        // trigger: "axis",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        // boundaryGap: false,
        data: this.list1[6].data,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: this.list1[4].name,
          type: "line",
          // stack: "Total",
          smooth: true,
          data: this.list1[4].data,
        },
        {
          name: this.list1[6].name,
          type: "line",
          // stack: "Total",
          smooth: true,
          data: this.list1[6].data,
        },
        {
          name: this.list1[3].name,
          type: "line",
          // stack: "Total",
          smooth: true,
          data: this.list1[3].data,
        },
      ],
    });
    // --------------------------------10------------------------------------
    var myChart10 = echarts.init(document.getElementById("main10"));
    myChart10.setOption({
      title: {
        text: "每周趋势",
      },
      tooltip: {
        trigger: "axis",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        data: this.list1[6].data,
        // boundaryGap: false,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: this.list1[0].name,
          type: "line",
          // stack: "Total",
          smooth: true,
          data: this.list1[0].data,
        },
        {
          name: this.list1[9].name,
          type: "line",
          // stack: "Total",
          smooth: true,
          data: this.list1[9].data,
        },
        {
          name: this.list1[1].name,
          type: "line",
          // stack: "Total",
          smooth: true,
          data: this.list1[1].data,
        },
        {
          name: this.list1[2].name,
          type: "line",
          // stack: "Total",
          smooth: true,
          data: this.list1[2].data,
        },
      ],
    });

    var myChart6 = echarts.init(document.getElementById("oio"));
    myChart6.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          data: this.list1[0].data,
        },
        {
          name: "Email",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: this.list1[1].data,
        },
        {
          name: "Union Ads",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: this.list1[2].data,
        },
        {
          name: "Video Ads",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: this.list1[3].data,
        },
        {
          name: "Search Engine",
          type: "bar",
          data: this.list1[4].data,
          emphasis: {
            focus: "series",
          },
          markLine: {
            lineStyle: {
              type: "dashed",
            },
            data: [[{ type: "min" }, { type: "max" }]],
          },
        },
        {
          name: "Baidu",
          type: "bar",
          barWidth: 5,
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: this.list1[5].data,
        },
        {
          name: "Google",
          type: "bar",
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: this.list1[6].data,
        },
        {
          name: "Bing",
          type: "bar",
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: this.list1[7].data,
        },
        {
          name: "Others",
          type: "bar",
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: this.list1[8].data,
        },
      ],
    });

    var myChart0 = echarts.init(document.getElementById("main0"));
    myChart0.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          selectedMode: "single",
          radius: [0, "30%"],
          label: {
            position: "inner",
            fontSize: 14,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1548, name: "搜索引擎", selected: true },
            { value: 775, name: "直达" },
            { value: 679, name: "营销广告" },
          ],
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["45%", "60%"],
          labelLine: {
            length: 20,
          },
          label: {
            rich: {
              a: {
                color: "#6E7079",
                lineHeight: 22,
                align: "center",
              },
              hr: {
                borderColor: "#8C8D8E",
                width: "100%",
                borderWidth: 1,
                height: 0,
              },
              b: {
                color: "#4C5058",
                fontSize: 14,
                fontWeight: "bold",
                lineHeight: 33,
              },
              per: {
                color: "#fff",
                backgroundColor: "#4C5058",
                padding: [3, 4],
                borderRadius: 4,
              },
            },
          },
          data: [
            { value: this.list[0].value, name: "百度" },
            { value: this.list[1].value, name: "直达" },
            { value: this.list[2].value, name: "营销广告" },
            { value: this.list[3].value, name: "谷歌" },
            { value: this.list[4].value, name: "必应" },
            { value: this.list[5].value, name: "搜索引擎" },
            { value: this.list[6].value, name: "邮件营销" },
            { value: this.list[7].value, name: "联盟广告" },
          ],
        },
      ],
    });
  },
}
</script>

<style scoped lang="less">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>
